<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/barry-blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/barry-blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/barry-blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/barry-blog/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/barry-blog/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/barry-blog/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/barry-blog/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="Hexo 博客搭建指南Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。本文未完结，欢迎star、fork，如果有错误，请不吝指出。我搭建的博客地址：limedroid.github.io         1 Hexo介绍Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github">
<meta property="og:type" content="article">
<meta property="og:title" content="Barry的技术博客">
<meta property="og:url" content="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/index.html">
<meta property="og:site_name" content="Barry的技术博客">
<meta property="og:description" content="Hexo 博客搭建指南Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。本文未完结，欢迎star、fork，如果有错误，请不吝指出。我搭建的博客地址：limedroid.github.io         1 Hexo介绍Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github">
<meta property="og:locale" content="default">
<meta property="og:image" content="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/art/snapshot_1.png">
<meta property="og:image" content="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/art/snapshot_2.png">
<meta property="og:image" content="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/art/snapshot_3.png">
<meta property="og:updated_time" content="2019-05-22T05:46:42.119Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Barry的技术博客">
<meta name="twitter:description" content="Hexo 博客搭建指南Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。本文未完结，欢迎star、fork，如果有错误，请不吝指出。我搭建的博客地址：limedroid.github.io         1 Hexo介绍Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github">
<meta name="twitter:image" content="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/art/snapshot_1.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/barry-blog/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://barryda.gitee.io/barry-blog/2019/05/22/Hexo搭建个人博客/">





  <title> | Barry的技术博客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/barry-blog/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Barry的技术博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/barry-blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/barry-blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://barryda.gitee.io/barry-blog/barry-blog/2019/05/22/Hexo搭建个人博客/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Barry">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/barry-blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Barry的技术博客">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline"></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2019-05-22T13:46:10+08:00">
                2019-05-22
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="Hexo-博客搭建指南"><a href="#Hexo-博客搭建指南" class="headerlink" title="Hexo 博客搭建指南"></a>Hexo 博客搭建指南</h1><p>Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。本文<strong>未完结</strong>，欢迎<code>star</code>、<code>fork</code>，如果有错误，请不吝指出。<br>我搭建的博客地址：<a href="https://limedroid.github.io" target="_blank" rel="noopener"><strong>limedroid.github.io</strong></a></p>
<p align="center"><br>  <img src="art/snapshot_1.png" alt="Hexo_Learning"><br></p><br><p align="center"><br>  <img src="art/snapshot_2.png" alt="Hexo_Learning"><br></p><br><p align="center"><br>  <img src="art/snapshot_3.png" alt="Hexo_Learning"><br></p>

<h2 id="1-Hexo介绍"><a href="#1-Hexo介绍" class="headerlink" title="1 Hexo介绍"></a>1 Hexo介绍</h2><p><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">Hexo</a>是基于<code>NodeJs</code>的静态博客框架，简单、轻量，其生成的静态网页可以托管在<code>Github</code>和<code>Heroku</code>上。</p>
<ul>
<li>超快速度</li>
<li>支持MarkDown</li>
<li>一键部署</li>
<li>丰富的插件</li>
</ul>
<blockquote>
<p>下面以我的博客为例，limedroid.github.io</p>
</blockquote>
<h2 id="2-环境准备"><a href="#2-环境准备" class="headerlink" title="2 环境准备"></a>2 环境准备</h2><h3 id="2-1-安装node-js"><a href="#2-1-安装node-js" class="headerlink" title="2.1 安装node.js"></a>2.1 安装node.js</h3><p>去<a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">nodejs官网</a>下载对应系统的安装包，按提示安装。</p>
<p>检验安装成功：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ node -v</span><br></pre></td></tr></table></figure></p>
<h3 id="2-2-安装hexo"><a href="#2-2-安装hexo" class="headerlink" title="2.2 安装hexo"></a>2.2 安装hexo</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span><br></pre></td></tr></table></figure>
<p>注意：Mac系统，则需要<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ sudo npm install hexo-cli -g</span><br></pre></td></tr></table></figure></p>
<h2 id="3-利用Hexo搭建一个博客"><a href="#3-利用Hexo搭建一个博客" class="headerlink" title="3 利用Hexo搭建一个博客"></a>3 利用Hexo搭建一个博客</h2><h3 id="3-1-创建博客目录limedroid-github-io"><a href="#3-1-创建博客目录limedroid-github-io" class="headerlink" title="3.1 创建博客目录limedroid.github.io"></a>3.1 创建博客目录<code>limedroid.github.io</code></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ hexo init limedroid.github.io</span><br><span class="line">$ cd limedroid.github.io</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure>
<h3 id="3-2-生成静态页面"><a href="#3-2-生成静态页面" class="headerlink" title="3.2 生成静态页面"></a>3.2 生成静态页面</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g</span><br></pre></td></tr></table></figure>
<blockquote>
<p>g 即generate</p>
</blockquote>
<h3 id="3-3-运行"><a href="#3-3-运行" class="headerlink" title="3.3 运行"></a>3.3 运行</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo s</span><br></pre></td></tr></table></figure>
<blockquote>
<p>s 即server</p>
</blockquote>
<p>然后打开浏览器，输入地址 <strong>localhost:4000</strong> 即可看到效果</p>
<h2 id="4-发一篇文章试试"><a href="#4-发一篇文章试试" class="headerlink" title="4 发一篇文章试试"></a>4 发一篇文章试试</h2><h3 id="4-1-命令方式"><a href="#4-1-命令方式" class="headerlink" title="4.1 命令方式"></a>4.1 命令方式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new test</span><br></pre></td></tr></table></figure>
<p>此时会在<code>source/_posts</code>目录下生成<code>test.md</code>文件，输入些许内容，然后保存.</p>
<p>生成下，看看效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g</span><br><span class="line">$ hexo s</span><br></pre></td></tr></table></figure>
<p>访问 <strong>localhost:4000</strong> 即可</p>
<h3 id="4-2-直接方式"><a href="#4-2-直接方式" class="headerlink" title="4.2 直接方式"></a>4.2 直接方式</h3><p>在 <strong>source/_posts/</strong>下新建一个<code>.md</code>文件也可</p>
<h2 id="5-配置"><a href="#5-配置" class="headerlink" title="5 配置"></a>5 配置</h2><p>网站的设置大部分都在<strong>_config.yml</strong>文件中，详细配置可以查看<a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="noopener">官方文档</a></p>
<p>下面只列出简单常用配置</p>
<ul>
<li><strong>title</strong> -&gt; 网站标题</li>
<li><strong>subtitle</strong> -&gt; 网站副标题</li>
<li><strong>description</strong> -&gt; 网站描述</li>
<li><strong>author</strong> -&gt; 您的名字</li>
<li><strong>language</strong> -&gt; 网站使用的语言</li>
</ul>
<p>坑：<strong>进行配置时，需要在冒号:后加一个英文空格</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">title: Droidlover</span><br></pre></td></tr></table></figure>
<h2 id="6-换一个好看的主题"><a href="#6-换一个好看的主题" class="headerlink" title="6 换一个好看的主题"></a>6 换一个好看的主题</h2><p>Hexo 中有很多主题，可以在<a href="https://hexo.io/themes/" target="_blank" rel="noopener">官网</a>查看。<br>这里我推荐<a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">hexo-theme-next</a>，下面列举更换主题的一般套路：</p>
<h3 id="6-1-下载主题资源"><a href="#6-1-下载主题资源" class="headerlink" title="6.1 下载主题资源"></a>6.1 下载主题资源</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone https://github.com/iissnan/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>
<h3 id="6-2-应用下载的主题"><a href="#6-2-应用下载的主题" class="headerlink" title="6.2 应用下载的主题"></a>6.2 应用下载的主题</h3><p>在网站配置文件<strong>_config.yml</strong>中，配置<strong>theme</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>
<blockquote>
<p>next是主题名称，具体的可查看主题的文档</p>
</blockquote>
<h3 id="6-3-主题其他配置"><a href="#6-3-主题其他配置" class="headerlink" title="6.3 主题其他配置"></a>6.3 主题其他配置</h3><p>可在<code>/theme/{theme}/_config.yml</code> 主题的配置文件下进行主题的配置。</p>
<p>接下来，可以执行万能的调试命令看看效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo g</span><br><span class="line">$ hexo s</span><br></pre></td></tr></table></figure>
<h2 id="7-部署到Github"><a href="#7-部署到Github" class="headerlink" title="7 部署到Github"></a>7 部署到Github</h2><h3 id="7-1-有个github账号xxx"><a href="#7-1-有个github账号xxx" class="headerlink" title="7.1 有个github账号xxx"></a>7.1 有个github账号xxx</h3><h3 id="7-2-创建一个xxx-github-io的public仓库"><a href="#7-2-创建一个xxx-github-io的public仓库" class="headerlink" title="7.2 创建一个xxx.github.io的public仓库"></a>7.2 创建一个xxx.github.io的public仓库</h3><p>如果您的账户名是limedroid,则需要创建一个limedroid.github.io的public仓库.</p>
<h3 id="7-3-安装-hexo-deployer-git"><a href="#7-3-安装-hexo-deployer-git" class="headerlink" title="7.3 安装 hexo-deployer-git"></a>7.3 安装 <a href="https://github.com/hexojs/hexo-deployer-git" target="_blank" rel="noopener">hexo-deployer-git</a></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<h3 id="7-4-网站配置git"><a href="#7-4-网站配置git" class="headerlink" title="7.4 网站配置git"></a>7.4 网站配置git</h3><p>在网站的<code>_config.yml</code>中配置deploy</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: &lt;repository url&gt;</span><br><span class="line">  branch: [branch]</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>branch</code>为分支，默认为<code>master</code>,可以不配置<br><code>repo</code>为仓库地址，在github上新建仓库后，可复制此地址</p>
</blockquote>
<h3 id="7-5-部署"><a href="#7-5-部署" class="headerlink" title="7.5 部署"></a>7.5 部署</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo d</span><br></pre></td></tr></table></figure>
<blockquote>
<p>d 即deploy</p>
</blockquote>
<h2 id="8-贴标签，方便搜索"><a href="#8-贴标签，方便搜索" class="headerlink" title="8 贴标签，方便搜索"></a>8 贴标签，方便搜索</h2><h3 id="8-1-两个确认"><a href="#8-1-两个确认" class="headerlink" title="8.1 两个确认"></a>8.1 两个确认</h3><ul>
<li><p>确认站点配置文件有 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tag_dir: tags</span><br></pre></td></tr></table></figure>
</li>
<li><p>确认主题配置文件有</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tags: tags</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="8-2-新建tags页面"><a href="#8-2-新建tags页面" class="headerlink" title="8.2 新建tags页面"></a>8.2 新建tags页面</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page tags</span><br></pre></td></tr></table></figure>
<p>此时会在<code>source/</code>下生成<code>tags/index.md</code>文件</p>
<h3 id="8-3-修改source-tags-index-md"><a href="#8-3-修改source-tags-index-md" class="headerlink" title="8.3 修改source/tags/index.md"></a>8.3 修改source/tags/index.md</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">title: tags</span><br><span class="line">date: 2015-10-20 06:49:50</span><br><span class="line">type: &quot;tags&quot;</span><br><span class="line">comments: false</span><br></pre></td></tr></table></figure>
<blockquote>
<p>date 可保持系统生成的时间，<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">type: &quot;tags&quot;</span><br><span class="line">comments: false</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>很重要</p>
<h3 id="8-4-在文章中添加tags"><a href="#8-4-在文章中添加tags" class="headerlink" title="8.4 在文章中添加tags"></a>8.4 在文章中添加tags</h3><p>在文章<code>xx.md</code>中添加：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">tags: </span><br><span class="line">	- Tag1</span><br><span class="line">	- Tag2</span><br><span class="line">	- Tag3</span><br></pre></td></tr></table></figure>
<p>多个Tag可按上面的格式添加。</p>
<p>其文件头部类似：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">title: TagEditText</span><br><span class="line">date: 2016-11-19 10:44:25</span><br><span class="line">tags: </span><br><span class="line">	- Tag1</span><br><span class="line">	- Tag2</span><br><span class="line">	- Tag3</span><br></pre></td></tr></table></figure>
<h2 id="9-分类，给文章归档"><a href="#9-分类，给文章归档" class="headerlink" title="9 分类，给文章归档"></a>9 分类，给文章归档</h2><h3 id="9-1-两个确认"><a href="#9-1-两个确认" class="headerlink" title="9.1 两个确认"></a>9.1 两个确认</h3><ul>
<li><p>确认站点配置文件打开了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">category_dir: categories</span><br></pre></td></tr></table></figure>
</li>
<li><p>确认主题配置文件打开了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">categories: /categories</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="9-2-新建categories文件"><a href="#9-2-新建categories文件" class="headerlink" title="9.2 新建categories文件"></a>9.2 新建categories文件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page categories</span><br></pre></td></tr></table></figure>
<p>此时会在<code>source</code>目录下生成<code>categories/index.md</code>文件</p>
<h3 id="9-3-修改categories-index-md"><a href="#9-3-修改categories-index-md" class="headerlink" title="9.3 修改categories/index.md"></a>9.3 修改categories/index.md</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">title: categories</span><br><span class="line">date: 2015-10-20 06:49:50</span><br><span class="line">type: &quot;categories&quot;</span><br><span class="line">comments: false</span><br></pre></td></tr></table></figure>
<blockquote>
<p>date 可保持系统生成的时间，<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">type: &quot;categories&quot;</span><br><span class="line">comments: false</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>很重要</p>
<h3 id="9-4-在文章中添加categories"><a href="#9-4-在文章中添加categories" class="headerlink" title="9.4 在文章中添加categories"></a>9.4 在文章中添加categories</h3><p>在文章xx.md中添加：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">categories: </span><br><span class="line">	- cate</span><br></pre></td></tr></table></figure>
<p>其文件头部类似：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">title: TagEditText</span><br><span class="line">date: 2016-11-19 10:44:25</span><br><span class="line">categories: </span><br><span class="line">	- cate</span><br></pre></td></tr></table></figure>
<h2 id="10-添加评论功能"><a href="#10-添加评论功能" class="headerlink" title="10 添加评论功能"></a>10 添加评论功能</h2><p>评论功能在国内一般使用<a href="http://duoshuo.com/" target="_blank" rel="noopener">多说</a>。</p>
<h3 id="10-1-注册多说账号"><a href="#10-1-注册多说账号" class="headerlink" title="10.1 注册多说账号"></a>10.1 注册<a href="http://duoshuo.com/" target="_blank" rel="noopener">多说</a>账号</h3><h3 id="10-2-创建站点"><a href="#10-2-创建站点" class="headerlink" title="10.2 创建站点"></a>10.2 创建站点</h3><p>需要注意的是，填写的<strong>多说域名</strong>不能更改，会在后面使用，在这里我配置成droidlover</p>
<h3 id="10-3-配置"><a href="#10-3-配置" class="headerlink" title="10.3 配置"></a>10.3 配置</h3><p>在hexo主题配置文件中搜索：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">duoshuo_shortname</span><br></pre></td></tr></table></figure></p>
<p>，然后打开开关，配置成前面设置的多说域名，如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">duoshuo_shortname: droidlover</span><br></pre></td></tr></table></figure></p>
<p>有时，可能需要一段js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 多说评论框 start --&gt;</span><br><span class="line">	&lt;div class=&quot;ds-thread&quot; data-thread-key=&quot;请将此处替换成文章在你的站点中的ID&quot; data-title=&quot;请替换成文章的标题&quot; data-url=&quot;请替换成文章的网址&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;!-- 多说评论框 end --&gt;</span><br><span class="line">&lt;!-- 多说公共JS代码 start (一个网页只需插入一次) --&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">var duoshuoQuery = &#123;short_name:&quot;droidlover&quot;&#125;;</span><br><span class="line">	(function() &#123;</span><br><span class="line">		var ds = document.createElement(&apos;script&apos;);</span><br><span class="line">		ds.type = &apos;text/javascript&apos;;ds.async = true;</span><br><span class="line">		ds.src = (document.location.protocol == &apos;https:&apos; ? &apos;https:&apos; : &apos;http:&apos;) + &apos;//static.duoshuo.com/embed.js&apos;;</span><br><span class="line">		ds.charset = &apos;UTF-8&apos;;</span><br><span class="line">		(document.getElementsByTagName(&apos;head&apos;)[0] </span><br><span class="line">		 || document.getElementsByTagName(&apos;body&apos;)[0]).appendChild(ds);</span><br><span class="line">	&#125;)();</span><br><span class="line">	&lt;/script&gt;</span><br><span class="line">&lt;!-- 多说公共JS代码 end --&gt;</span><br></pre></td></tr></table></figure>
<p>现在，你可以运行看下效果了:)</p>
<h2 id="11-加介绍页面，让全世界认识你"><a href="#11-加介绍页面，让全世界认识你" class="headerlink" title="11 加介绍页面，让全世界认识你"></a>11 加介绍页面，让全世界认识你</h2>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/barry-blog/2019/05/22/hello-world/" rel="next" title="Hello World">
                <i class="fa fa-chevron-left"></i> Hello World
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">Barry</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/barry-blog/archives/">
              
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Hexo-博客搭建指南"><span class="nav-number">1.</span> <span class="nav-text">Hexo 博客搭建指南</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-Hexo介绍"><span class="nav-number">1.1.</span> <span class="nav-text">1 Hexo介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-环境准备"><span class="nav-number">1.2.</span> <span class="nav-text">2 环境准备</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-安装node-js"><span class="nav-number">1.2.1.</span> <span class="nav-text">2.1 安装node.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-安装hexo"><span class="nav-number">1.2.2.</span> <span class="nav-text">2.2 安装hexo</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-利用Hexo搭建一个博客"><span class="nav-number">1.3.</span> <span class="nav-text">3 利用Hexo搭建一个博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-创建博客目录limedroid-github-io"><span class="nav-number">1.3.1.</span> <span class="nav-text">3.1 创建博客目录limedroid.github.io</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-生成静态页面"><span class="nav-number">1.3.2.</span> <span class="nav-text">3.2 生成静态页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-运行"><span class="nav-number">1.3.3.</span> <span class="nav-text">3.3 运行</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-发一篇文章试试"><span class="nav-number">1.4.</span> <span class="nav-text">4 发一篇文章试试</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#4-1-命令方式"><span class="nav-number">1.4.1.</span> <span class="nav-text">4.1 命令方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-2-直接方式"><span class="nav-number">1.4.2.</span> <span class="nav-text">4.2 直接方式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-配置"><span class="nav-number">1.5.</span> <span class="nav-text">5 配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-换一个好看的主题"><span class="nav-number">1.6.</span> <span class="nav-text">6 换一个好看的主题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#6-1-下载主题资源"><span class="nav-number">1.6.1.</span> <span class="nav-text">6.1 下载主题资源</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-2-应用下载的主题"><span class="nav-number">1.6.2.</span> <span class="nav-text">6.2 应用下载的主题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-3-主题其他配置"><span class="nav-number">1.6.3.</span> <span class="nav-text">6.3 主题其他配置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-部署到Github"><span class="nav-number">1.7.</span> <span class="nav-text">7 部署到Github</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#7-1-有个github账号xxx"><span class="nav-number">1.7.1.</span> <span class="nav-text">7.1 有个github账号xxx</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-2-创建一个xxx-github-io的public仓库"><span class="nav-number">1.7.2.</span> <span class="nav-text">7.2 创建一个xxx.github.io的public仓库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-3-安装-hexo-deployer-git"><span class="nav-number">1.7.3.</span> <span class="nav-text">7.3 安装 hexo-deployer-git</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-4-网站配置git"><span class="nav-number">1.7.4.</span> <span class="nav-text">7.4 网站配置git</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-5-部署"><span class="nav-number">1.7.5.</span> <span class="nav-text">7.5 部署</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-贴标签，方便搜索"><span class="nav-number">1.8.</span> <span class="nav-text">8 贴标签，方便搜索</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#8-1-两个确认"><span class="nav-number">1.8.1.</span> <span class="nav-text">8.1 两个确认</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-2-新建tags页面"><span class="nav-number">1.8.2.</span> <span class="nav-text">8.2 新建tags页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-3-修改source-tags-index-md"><span class="nav-number">1.8.3.</span> <span class="nav-text">8.3 修改source/tags/index.md</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-4-在文章中添加tags"><span class="nav-number">1.8.4.</span> <span class="nav-text">8.4 在文章中添加tags</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-分类，给文章归档"><span class="nav-number">1.9.</span> <span class="nav-text">9 分类，给文章归档</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#9-1-两个确认"><span class="nav-number">1.9.1.</span> <span class="nav-text">9.1 两个确认</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-2-新建categories文件"><span class="nav-number">1.9.2.</span> <span class="nav-text">9.2 新建categories文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-3-修改categories-index-md"><span class="nav-number">1.9.3.</span> <span class="nav-text">9.3 修改categories/index.md</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-4-在文章中添加categories"><span class="nav-number">1.9.4.</span> <span class="nav-text">9.4 在文章中添加categories</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-添加评论功能"><span class="nav-number">1.10.</span> <span class="nav-text">10 添加评论功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#10-1-注册多说账号"><span class="nav-number">1.10.1.</span> <span class="nav-text">10.1 注册多说账号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-2-创建站点"><span class="nav-number">1.10.2.</span> <span class="nav-text">10.2 创建站点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-3-配置"><span class="nav-number">1.10.3.</span> <span class="nav-text">10.3 配置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-加介绍页面，让全世界认识你"><span class="nav-number">1.11.</span> <span class="nav-text">11 加介绍页面，让全世界认识你</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Barry</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/barry-blog/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/barry-blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/barry-blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/barry-blog/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/barry-blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/barry-blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/barry-blog/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/barry-blog/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/barry-blog/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/barry-blog/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/barry-blog/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
